<template>
  <div>
    <!-- 列表 -->
    <div class="h-content bg-black">
      <img :src="bg1" class="bg-img" />
      <div class="h-text">
        <div class="box">
          <div class="h-label">
            <div class="h-title">优质、高效、用心服务为客户</div>
            <pre>HIGH QUALITY, HIGH EFFICIENCY
WHOLE-HEARTED SERVICE FOR THE CUSTOMER</pre>
          </div>
        </div>
      </div>
    </div>
    <div class="h-content bg-white">
      <img :src="bg2" class="bg-img" />
      <div class="h-text black h-setm">
        <div class="box blackLayer">
          <div class="h-label h-right" style="padding-top: 10px;">
            <div class="h-title b-set">COMPANY</div>
            <div class="h-title b-black">PROFILE</div>
            <div class="h-title b-black" style="font-size: 22px;line-height: 26px;">公司简介</div>
          </div>
        </div>
        <div>
          <p>重庆合一信息技术有限公司成立于2017年，是重庆市北部新区重点扶持的互联网企 业，公司们位于环境优美，互联网气氛浓厚的北部新区互联网产业园。公司作为猪八 戒网的孵化企业，主营业务为移动互联网产品的开发外包，以及自有产品的开发运营
            及维护。 公司秉承“技术以人为本”的理念，为客户提供基于互联网的全方位服务，同时为内 部员工提供优于行业水平的待遇福利，以及广阔的晋升通道。 公司现有员工三十余人，望有识之士能够加入我们，共创美好未来。
          </p>
        </div>
      </div>
    </div>

    <!-- 项目介绍 -->
    <div class="h-content bg-black flex">
      <div class="full-left flex3 answer-v">
        <div class="bg-border-white">
          <div class="h-title b-set fs-38">PROJECT</div>
          <div class="h-title b-white fs-38">INTRODUCTION</div>
          <div class="h-title b-white fs-22">项目介绍</div>
        </div>
        <div>
          <p style="color: white;" class="p-top">重庆合一信息技术有限公司成立于2017年，是重庆市北 部新区重点扶持的互联网企业，公司们位于环境优美，互 联网气氛浓厚的北部新区互联网产业园。公司作为猪八戒 网的孵化企业，主营业务为移动互联网产品的开发外包， 以及自有产品的开发运营及维护。
            公司秉承“技术以人为本”的理念，为客户提供基于互联 网的全方位服务，同时为内部员工提供优于行业水平的待 遇福利，以及广阔的晋升通道。 公司现有员工三十余人，望有识之士能够加入我们，共创 美好未来。
          </p>
        </div>
      </div>
      <div class="full-right flex4 pro-right">
        <img :src="bg5" class="icon-bg">
        <div class="icon-lists">
          <!-- 白色框内的4个列表 -->
          <!-- start -->
          <div class="icon-list" v-for="item in iconLists">
            <div class="icon-logo">
              <img :src="item.icon" />
            </div>
            <div class="icon-title">
              <div class="icon-label">{{item.title}}</div>
              <div class="icon-bt-border"></div>
            </div>
            <div class="icon-text">
              {{item.text}}
            </div>
          </div>
          <!-- end -->
        </div>
      </div>
    </div>
    <!-- 项目介绍结束 -->
    <!-- 我们的作品 -->
    <div class="h-content bg-white flex">
      <div class="full-left flex1 answer-w">
        <div class="bg-border-block mRight">
          <div class="h-title b-set fs-38">OUR</div>
          <div class="h-title b-black fs-38">PROJECTS</div>
          <div class="h-title b-black fs-22 fw6">我们的作品</div>
        </div>
        <ul class="h-works">
          <li v-for="item in ourData">{{item}}</li>
        </ul>
      </div>
      <div class="full-right flex1">
        <ul class="h-works-ex">
          <li v-for="item in ourWorks">
            <div>
              <img :src="item.cover_path" />
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 我们的作品结束 -->

    <!-- 关于我们 -->
    <!--<div class="h-content bg-black ">
      <img :src="bg14" class="icon-bg">
      <div class="psA flex info">
        <div class="full-left flex2 answer-v">
          <div class="bg-border-white">
            <div class="h-title b-set fs-38">PROJECT</div>
            <div class="h-title b-white fs-38">INTRODUCTION</div>
            <div class="h-title b-white fs-22">项目介绍</div>
          </div>
          <div>
            <p style="color:white" class="p-top">重庆合一信息技术有限公司成立于2017年，是重庆市北 部新区重点扶持的互联网企业，公司们位于环境优美，互 联网气氛浓厚的北部新区互联网产业园。公司作为猪八戒 网的孵化企业，主营业务为移动互联网产品的开发外包， 以及自有产品的开发运营及维护。
              公司秉承“技术以人为本”的理念，为客户提供基于互联 网的全方位服务，同时为内部员工提供优于行业水平的待 遇福利，以及广阔的晋升通道。 公司现有员工三十余人，望有识之士能够加入我们，共创 美好未来。
            </p>
          </div>
        </div>
        <div class="full-right flex4 pro-right">
          <ul class="h-staff">
            <li v-for="item in ourTeams" class="flex1">
              <div class="staff-logo"><img :src="item.cover_path"></div>
              <div class="staff-job">{{item.title}}</div>
              <div class="staff-info">{{item.description}}</div>
            </li>
          </ul>
        </div>
      </div>

    </div>-->
    <!-- 关于我们结束 -->
  </div>
</template>
<style lang="less">
  p {
    max-width: 380px;
    padding: 10px;
    line-height: 24px;
  }

  .p-top {
    margin-top: 40px;
  }

  .h-content {
    position: relative;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
    .h-text {
      position: absolute;
      top: 30%;
      left: 30%;
      .box {
        width: 400px;
        height: 200px;
        border: 6px solid rgba(255, 255, 255, 0.3);
        position: relative;
        .h-label {
          color: white;
          padding-top: 28px;
          position: relative;
          right: 115px;
          .h-title {
            font-size: 38px;
            top: 0;
            left: 0;
            line-height: 60px;
            white-space: nowrap;
          }
          pre {
            padding: 0;
            color: white;
            background: none;
            border: none;
            line-height: 20px;
            font-size: 14px;
          }
        }
        .h-label::after {
          content: '——inoneone';
          float: right;
        }
        .h-right {
          right: 60px;
        }
      }
      .blackLayer {
        border: 6px solid rgba(0, 0, 0, 0.3);
      }
    }
    .black {
      left: 20%;
      top: 20%;
      color: #000000;
      p {
        color: #000000;
        background: none;
        border: none;
        padding: 0;
        margin-top: 57px;
        width: 100%;
      }
    } // 第二个的框内样式
    .b-set {
      color: #267cc1;
      font-weight: 700;
    }
    .b-black {
      color: black;
      font-weight: 700;
    }
    .b-white {
      color: white;
    }
  } // 黑色边框
  .bg-border-block {
    border: 6px solid rgba(0, 0, 0, 0.3);
    width: 400px;
    height: 200px;
  } // 白色边框
  .bg-border-white {
    border: 6px solid rgba(255, 255, 255, 0.3);
    width: 400px;
    height: 200px;
  }

  .answer-v {
    padding: 100px 0 100px 10%;
    pre {
      color: white;
      background: none;
      border: none;
      padding: 0;
      margin-top: 57px;
      width: 100%;
    }
  }

  .h-title {
    position: relative;
    right: 49px;
    top: 25px;
  }

  .info {
    top: 0;
    width: 100%;
    height: 100%;
  }

  .b-set {
    color: #267cc1;
  }

  .pro-right {
    position: relative;
    .icon-lists {
      .icon-list {
        padding: 5px;
        width: ~'calc(50% - 10px)';
        display: inline-block;
        vertical-align: top;
        min-height: 50%;
      }
      position: absolute;
      width: 100%;
      min-height: 80%;
      top: 10%;
      padding: 40px;
      right: 10%;
      background-color: rgba(255, 255, 255, 0.8);
      .icon-logo {
        width: 40px;
      }
      .icon-bt-border {
        width: 50px;
        border: 3px solid #267cc1;
      }
      .icon-title {
        line-height: 30px;
        .icon-label {
          font-weight: 600;
        }
      }
      .icon-text {
        line-height: 25px;
        padding-top: 30px;

      }
    }
  }

  .bg-white {
    background: white;
  }

  .answer-w {
    padding: 100px 0 0 0;
  }

  .h-works {
    margin-top: 60px;
    text-align: right;
    margin-right: 100px;
    li {
      line-height: 40px;
      color: #666666;
      list-style-type: none;
      font-size: 12px;
    }
  }

  .h-works-ex {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    li {
      width: 50%;
      display: inline-block;
      list-style-type: none;
    }
  }

  .bg-black {
    background: #373136;
  }

  .h-staff {
    margin: 0;
    position: relative;
    top: 15%;
    li {
      list-style-type: none;
      display: inline-block;
      vertical-align: middle;
      margin: 20px;
      width: 200px;
      .staff-logo {
        padding: 10px;
        background: #267cc1;
      }
      .staff-job {
        background: #84b5dc;
        line-height: 40px;
        text-align: center;
        color: white;
        font-size: 16px;
      }
      .staff-info {
        background: rgba(255, 255, 255, 0.3);
        height: 200px;
        color: white;
        font-size: 14px;
        line-height: 25px;
        text-indent: 2em;
        padding: 5px;
      }
    }
  }

  .mRight {
    position: relative;
    left: ~'calc(90% - 400px)';
  }

  @media screen and (max-width: 1100px) {
    .mRight {
      left: 0;
      margin: auto;
    }
  }

  @media screen and (max-width: 900px) {
    p {
      margin: 0 auto !important;
    }
    .p-top {
      margin-top: 0px !important;
    }
    .h-content {
      min-width: auto;
      min-height: auto;
      .h-text {
        left: 0;
        margin-top: 80px;
        position: relative;
        .box {
          width: ~'calc(100% - 10px)' !important;
          margin: 5px;
          .h-label {
            left: 0;
            .h-title {
              font-size: 30px;
            }
          }
        }
      }
      .bg-img {
        position: absolute;
        height: 100%;
        width: auto;
      }
    }
    .h-setm {
      margin-top: 30px !important;
      p {
        margin-top: 10px !important;
        padding: 5px;
      }
    }
    .answer-v {
      padding: 20px 0;
      .h-title {
        right: 0px;
      }
      p {
        margin: 0;
        padding: 10px;
      }
    }
    .h-content img {
      width: 100%;
      height: auto;
    }
    .flex {
      display: block !important;
    }
    .bg-border-block {
      width: ~'calc(100% - 20px)';
    }
    .bg-border-white {
      width: ~'calc(100% - 20px)';
      margin: 10px;
      height: 200px;
    } // 项目右边
    .pro-right {
      position: relative;
      .icon-bg {
        position: absolute;
        height: 100%;
      }
      .icon-lists {
        position: relative;
        width: 100%;
        top: 0;
        padding: 0;
        right: 0;
        background-color: rgba(255, 255, 255, 0.8);
        .icon-list {
          padding: 0;
          width: 100%;
          float: none;
          height: auto;
          padding: 20px;
        }
        .icon-logo {
          width: 40px;
          height: auto;
        }
        .icon-bt-border {
          width: 50px;
          border: 3px solid #267cc1;
        }
        .icon-title {
          line-height: 30px;
          .icon-label {
            font-weight: 600;
          }
        }
        .icon-text {
          line-height: 25px;
          padding-top: 20px;
        }
      }
    }
    .h-works {
      margin-right: 20px;
      margin-top: 10px;
    }
    .answer-w {
      padding: 40px 0 0 0;
      .h-title {
        right: 0;
      }
    }
    .h-staff li {
      width: ~'calc(50% - 10px)';
      margin: 5px;
      top: 0;
      vertical-align: middle;
    }
    .icon-bg {
      position: absolute;
      height: 100% !important;
      width: auto;
    }
    .psA {
      position: relative !important;
    }
    .h-staff {
      padding: 0;
    }
  }

</style>

<script>
  import h1 from '../images/h001.jpg'
  import h2 from '../images/h002.jpg'
  import h5 from '../images/h005.jpg'
  import h6 from '../images/h006.png'
  import h7 from '../images/h007.png'
  import h8 from '../images/h008.png'
  import h9 from '../images/h009.png'
  import h10 from '../images/h010.jpg'
  import h11 from '../images/h011.jpg'
  import h12 from '../images/h012.jpg'
  import h13 from '../images/h013.jpg'
  import h14 from '../images/h014.jpg'
  import h15 from '../images/h015.jpg'
  import $ from 'jQuery'
  export default {
    name: "hx-home",
    created: function () {
      $.ajax('index.php?s=/home/index/top').then((data) => {
        this.ourWorks = data
      })
      $.ajax('index.php?s=/home/index/myInfo').then((data) => {
        this.ourTeams = data
      })
    },
    data: () => {
      return {
        bg1: h1,
        bg2: h2,
        bg5: h5,
        bg14: h14,
        bg15: h15,
        // 项目栏列表信息
        iconLists: [{
          icon: h6,
          title: 'WeChat mall development | 微商城开发',
          text: '技术团队拥有4年微信商城开发经验，提供包括全定制化开发，模版开发等多种开发方案。为生鲜，餐饮，百货，奢侈品，玩具等行业累计超过100家伙伴提供成功产业升级。以最高效，优质的服务期待为更多传统行业插上互联网+的翅膀。'
        }, {
          icon: h7,
          title: 'WeChat mall operations | 微商城运营',
          text: '提供包括，软文撰写，事件营销，常规线上活动制作等多种类运营手段。合作模式可根据自身情况选择全托管，半托管，固定付费，比例提成等。我们相信没有最好的，只有最适合你的。'
        }, {
          icon: h8,
          title: 'Publishing platform | 信息发布平台',
          text: '企业“触网”最基础的设施。我公司为您的第一次“触网”提供简洁，快速的道路。让您用较少的投入就可享受到互联网带来的变化和红利。通过信息发布平台，可以将您公司企业展示到更多人面前。'
        }, {
          icon: h9,
          title: 'Management system | 加油机管理系统',
          text: '让加油数据管理不在繁琐，企业主可在平台上通过PC端，手机端随时监控加油情况。经营数据一目了然。工作更多的交给机器，时间更多的留给自己。'
        }],
        // 作品展示
        ourData: ['WECHAT DEVELOPMENT | 微信开发', 'APP DEVELOPMENT | APP开发', 'WEBSITE CONSTRUCTION | 网站建设',
          'H5 DESIGN | H5页面设计', 'ENTERPTISE INFORMATION RELEASE | 企业信息发布'
        ],
        // 作品内容和信息
        ourWorks: [{
          src: h10
        }, {
          src: h11
        }, {
          src: h12
        }, {
          src: h13
        }],
        // 职工人员介绍
        ourTeams: [{
          src: h15,
          job: 'web前端',
          info: '设计就是设计一种生活方式。 厚德必能载物，与设计较劲者，为理想而执着，喜欢钻研学术，擅长于将理论转化于 商业设计操作。'
        }, {
          src: h15,
          job: 'web前端',
          info: '设计就是设计一种生活方式。 厚德必能载物，与设计较劲者，为理想而执着，喜欢钻研学术，擅长于将理论转化于 商业设计操作。'
        }, {
          src: h15,
          job: 'web前端',
          info: '设计就是设计一种生活方式。 厚德必能载物，与设计较劲者，为理想而执着，喜欢钻研学术，擅长于将理论转化于 商业设计操作。'
        }, {
          src: h15,
          job: 'web前端',
          info: '设计就是设计一种生活方式。 厚德必能载物，与设计较劲者，为理想而执着，喜欢钻研学术，擅长于将理论转化于 商业设计操作。'
        }]
      }
    }
  }

</script>
